<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>子元素过滤</title>
    <script src="./jquery-3.3.1.min.js"></script>
</head>
<body>
    <style>
        body{
            margin:0;
            padding:0;
        }
        ul{
            padding:0;
        }
        ul>li{
        list-style: none;
        }
    </style>
    <ul>
        <li>l1</li>
        <li>l2</li>
        <li>l3</li>
        <li>l4</li>
        <li>l5</li>
        <li>l6</li>
    </ul>
     <ul>
        <li>r1</li>
        <li>r2</li>
        <li>r3</li>
    </ul>
    <form action="">
        答案：<input type="text">
        <p>我们都是好孩子</p>
        <span>我们都是孩子</span>
        <p>我们都是坏孩子</p>
        <p>我们都是男孩子</p>
        判断题：<input type="text">
    </form>
        选择题：<input type="text">
        <div>
            <p>我们都是好孩子</p>
        </div>
        <div>
            <p>hahaha</p>
        </div>
    <script>
        // FIRST:选择所有父级元素下的第一个子元素
        //如例：选择ul标签下第一个li元素
        $('ul li:first-child').css('border','2px solid blue');
        //SECOND:选择所有相同元素名称下的第一个兄弟元素
        //如例：选中相同标签下的第一个input元素
        $('input:first-of-type').css('background','pink');
        //THIRD:选中所有父级元素下的最后一个子元素
        // 如例:选中ul标签下的最后一个li标签
        $('ul li:last-child').css('border','2px solid yellow');
        //FOUTH:选择所有元素之间具有相同元素名称的最后一个兄弟元素
        //选择最后一个p标签字号20
        $('p:last-of-type').css('font-size','20px')
        //FIFTH:选择所有他们父元素的第n个子元素。计数从最后一个元素开始到第一个。
        //选择li的第四个元素
        $('li:nth(3)').css('color','blue')
        //sixth:选择的所有他们的父级元素的第n个子元素，计数从最后一个元素到第一个。
        //选择P的第二个子元素
        $('p:nth-of-type(2)').css('border','2px dotted orange')
        //seventh:only-child Selector
        //如果某个元素是其父元素的唯一子元素，那么它就会被选中。
        //选中div的唯一子元素P
        $('p:only-child').css('color','green')
        //eighth:only-of-type Selector
        //选择所有没有兄弟元素，且具有相同元素名称的元素
        //选择没有兄弟元素的p标签
        $('p:only-of-type').css('background','grey')
        

    </script>
</body>
</html>